<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>通知车主挪车</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
</head>
<body class="prevent-bounce">
    <!-- 顶部工具栏 -->
    <div class="top-toolbar">
        <div class="toolbar-left">
            <button class="toolbar-btn" id="adminEntry">
                <i class="ri-settings-3-line"></i>
            </button>
        </div>
        <div class="toolbar-right">
            <button class="toolbar-btn" data-theme="light">
                <i class="ri-sun-line"></i>
            </button>
            <button class="toolbar-btn" data-theme="warm">
                <i class="ri-sun-foggy-line"></i>
            </button>
            <button class="toolbar-btn" data-theme="dark">
                <i class="ri-moon-line"></i>
            </button>
        </div>
    </div>

    <div class="container">
        <h1>通知车主挪车</h1>
        
        <textarea 
            id="messageInput" 
            class="input-box-textarea" 
            placeholder="可留下联系方式，方便车主联系您！可留空，默认发送信息给车主尽快前来移车！"
        ></textarea>

        <button id="notifyBtn" class="notify-btn">
            <i class="ri-notification-4-line"></i>
            通知车主
        </button>

        <div id="callSlider" class="call-slider">
            <div class="call-text">向右滑动拨打电话</div>
            <div id="callHandle" class="call-handle">
                <i class="ri-phone-line"></i>
            </div>
            <div id="callProgress" class="call-progress"></div>
        </div>

        <button id="historyToggle" class="history-toggle">
            <span>
                <i class="ri-history-line"></i>
                通知历史记录
            </span>
            <span id="historyCount">0条记录</span>
        </button>

        <div id="historyList" class="history-list"></div>
    </div>

    <!-- 密码验证弹窗 -->
    <div class="password-modal" id="passwordModal">
        <div class="password-content">
            <h3>
                <i class="ri-shield-keyhole-line"></i>
                请输入管理密码
            </h3>
            <input type="password" id="passwordInput" placeholder="请输入密码">
            <div class="password-buttons">
                <button id="passwordSubmit">
                    <i class="ri-login-circle-line"></i>
                    确认
                </button>
                <button id="passwordCancel">
                    <i class="ri-close-circle-line"></i>
                    取消
                </button>
            </div>
        </div>
    </div>

    <!-- Toast提示 -->
    <div id="toastContainer" class="toast-container">
        <div class="toast-content">
            <div class="toast-message"></div>
        </div>
    </div>

    <script src="config.js"></script>
    <script src="app.js"></script>
</body>
</html>